<template>
	<view>

		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>

		<view style="margin-top:15rpx" class="gui-flex gui-rows gui-space-between">
			<view class="gui-text-small demo gui-color-black gui-grids-icon gui-icons"
				style="font-size: 34rpx;font-weight: bold;">&#xe64c; {{status_words}}</view>
			<view class="gui-text-small demo " v-if="status_words=='待使用'">
				<button type="default" class="gui-button gui-bg-primary gui-noborder" @tap="goto_appointment()">
					<text class="gui-icons gui-color-white gui-button-text">立即预约</text>
				</button>
			</view>
		</view>


		<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top" v-if="status>0">
			<gui-image :src="qrcode_img" style="margin: 0 auto;"></gui-image>
		</view>

		<view class="gui-margin-top" style="margin-left: 40rpx;">
			下单时间：{{pay_time}}
		</view>
		<!-- <view class="gui-margin-top" style="margin-left: 40rpx;">
			过期时间：{{expire_day}}过期
		</view> -->
		<view class="gui-margin-top gui-color-red gui-bold" style="margin-left: 40rpx;">
			券码：{{coupon_code}}
		</view>

		<view class="gui-margin-top gui-color-blue gui-bold" style="margin-left: 40rpx;" @tap="map_nav()">
			地址：{{address}}
		</view>


		<view class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-margin-top gui-box-shadow">

			<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
				<image mode="aspectFill" :src="logo" class="gui-card-img"></image>
				<view class="gui-card-desc">
					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
						<text class="gui-card-name gui-primary-text">{{order_title}}</text>
						<!-- <text class="gui-text-small gui-primary-color">{{teacher_nickname}}</text> -->
					</view>
					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
						<!-- <text class="gui-card-name gui-primary-text">{{order_title}}</text> -->
						<text class="gui-text-small gui-primary-color">{{teacher_nickname}}</text>
					</view>

					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin-top: 10rpx;">
						<text class="gui-card-text gui-block gui-third-text">营业时间：{{business_hours}}</text>
					</view>

					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin-top: 10rpx;">
						<text class="gui-card-text gui-block gui-third-text">￥{{order_money}}</text>
					</view>
				</view>
			</view>
			<view class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
				<text class="gui-icons gui-color-gray gui-card-footer-item gui-border-r gui-bold"
					@tap="goto_teacher()">&#xe6fe; 助教详情</text>
				<text class="gui-icons gui-color-gray gui-card-footer-item gui-border-r gui-bold"
					@tap="goto_shop_details()">&#xe608; 商家详情</text>
				<text class="gui-icons gui-color-red gui-card-footer-item gui-border-r gui-bold" v-if="status==10"
					@tap="apply_refund()">&#xe612; 申请退款</text>
				<text class="gui-icons gui-color-red gui-card-footer-item gui-border-r gui-bold" v-if="status==0"
					@tap="next_pay()">&#xe612; 继续支付</text>
				<!-- <text class="gui-icons gui-color-gray gui-card-footer-item gui-border-r">&#xe613; 设置</text>
				<text class="gui-icons gui-color-gray gui-card-footer-item">&#xe61e; 链接</text> -->
			</view>
		</view>



	</view>

	</view>




</template>
<script>
	export default {
		data() {
			return {
				id: 0,
				qrcode_img: "",
				pay_time: "",
				expire_day: "",
				coupon_code: "",
				address: "",
				order_money: 0,
				order_title: "",
				teacher_nickname: '',
				logo: '',
				business_hours: '',
				longitude: '',
				latitude: '',
				shop_id: 0,
				teacher_id: 0,
				status_words: '',
				status: 0,
				refund_status: 0
			}
		},
		onLoad: function(query) {
			this.$globalMethod();
			if (typeof query.id != 'undefined') {
				this.orders_details(query.id)
				this.id = query.id;
			}
		},
		methods: {
			apply_refund() {
				let _this = this;
				_this.graceJS.post(_this.serverUrl + '/api.orders/apply_refund', {
					id: _this.id
				}, 'json', {
					token: _this.token
				}, (res) => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code==0){
						this.orders_details(_this.id);
					}
				},(e)=>{
					uni.showToast({
						title:'网络请求失败，请稍后再试',
						icon:'none'
					})
				})
			},
			next_pay() {
				let _this = this;
				_this.graceJS.post(_this.serverUrl + '/api.orders/next_pay', {
					id: _this.id
				}, 'json', {
					token: _this.token
				}, (res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				
					if (res.code == 0) {
						var data = res.data;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timestamp,
							nonceStr: data.nonce_str,
							package: 'prepay_id='+data.prepay_id,
							signType: 'MD5',
							paySign: data.pay_sign,
							success: function(res) {
								
								
								
								uni.requestSubscribeMessage({
									tmplIds:['VuZBskoDR0Mwr_9yQvAeoVVK1gHjwaVLrnUe_N0hdv8'],
									success(res){
										// console.log(res);
									}
								});	
								
								uni.reLaunch({
									url:'/pages/order/list',
									success:function(){
										uni.showToast({
											title:'支付成功',
											icon:'none'
										})
									}
								})
								
								
								
							},
							fail: function(err) {
								if(err.errMsg=='requestPayment:fail cancel'){
									uni.showToast({
										title: '用户取消支付',
										icon: 'none'
									});
								}else{
									uni.showToast({
										title: '用户支付失败',
										icon: 'none'
									});
								}
								
								return false;
							}
						});
					}
				}, (e) => {
					uni.showToast({
						title: '网络请求失败，请稍后再试',
						icon: 'none'
					});
				})
			},
			goto_appointment() {
				uni.navigateTo({
					url: '/pages/order/reservation?id=' + this.id
				})
			},
			map_nav() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					success: function() {
						console.log('success');
					}
				});
			},
			goto_shop_details() {
				uni.navigateTo({
					url: '/pages/shop/shop_details?id=' + this.shop_id
				})
			},
			goto_teacher() {
				uni.navigateTo({
					url: '/pages/coach/details?id=' + this.teacher_id
				})
			},
			orders_details(id) {
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.orders/user_order_info', //仅为示例，并非真实接口地址。
					data: {
						id: id
					},
					header: {
						token: _this.token
					},

					success: (res) => {

						_this.$refs.guipageloading.close();

						var return_data = res.data;


						console.log(return_data);
						if (return_data.code == 0) {
							_this.id = return_data.data.id;
							_this.pay_time = return_data.data.create_time;
							_this.coupon_code = return_data.data.code;
							_this.address = return_data.data.address;
							_this.order_money = return_data.data.order_money;
							_this.teacher_nickname = return_data.data.teacher_nickname;
							_this.order_title = return_data.data.order_name;
							_this.logo = return_data.data.shop_logo;
							_this.business_hours = return_data.data.business_hours;
							_this.longitude = return_data.data.longitude;
							_this.latitude = return_data.data.latitude;
							_this.shop_id = return_data.data.shop_id;
							_this.teacher_id = return_data.data.teacher_id;
							_this.qrcode_img = return_data.data.qrcode;
							_this.status_words = return_data.data.status_words;
							_this.status = return_data.data.status;
							_this.refund_status = return_data.data.refund_status;

						} else {
							uni.showToast({
								title: return_data.msg,
								icon: 'error'
							})
						}
					}
				});
			}
		}
	}
</script>
<style scoped>
	.demo {
		width: 210rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 10rpx;
	}

	.demo-auto-width {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 10rpx;
	}

	.gui-text-small {
		font-size: 20rpx;
	}

	/* 卡片视图 */
	.gui-card-view {
		padding: 25rpx;
		margin: 0 30rpx;
		margin-top: 30rpx;
	}

	.gui-card-body {
		padding-bottom: 30rpx;
	}

	.gui-card-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 80rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
	}

	/* #ifndef APP-NVUE */
	.gui-card-footer-item {
		display: block;
	}

	.gui-box-shadow {
		box-shadow: 0px 0px 3rpx #999999;
	}

	/* #endif */
</style>